<template>
  <div>
    <el-card>
      <el-tabs value="1" @tab-click="getType">
        <el-tab-pane label="取件作业" name="1"></el-tab-pane>
        <el-tab-pane label="派件作业" name="2"></el-tab-pane>
      </el-tabs>
      <el-form :inline="true" ref="form" label-width="90px">
        <el-form-item label="运单编号">
          <el-input placeholder="请输入运单编号" v-model="order.tranOrderId"></el-input>
        </el-form-item>
        <el-form-item label="快递员姓名">
          <el-input placeholder="请输入快递员姓名" v-model="order.courierName"></el-input>
        </el-form-item>
        <span v-if="order.taskType === 1">
          <el-form-item label="发件人地址">
            <el-cascader :options="options" @change="getSender" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="发件人姓名">
            <el-input placeholder="请输入发件人姓名" v-model="order.senderName"></el-input>
          </el-form-item>
        </span>
        <span v-if="order.taskType === 2">
          <el-form-item label="收件人地址">
            <el-cascader :options="options" @change="getReceiver" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="收件人姓名">
            <el-input placeholder="请输入发件人姓名" v-model="order.receiverName"></el-input>
          </el-form-item>
        </span>
        <el-form-item label="作业状态">
          <el-select placeholder="请选择" v-model="order.status">
            <el-option label="待执行" :value="1"></el-option>
            <el-option label="进行中" :value="2"></el-option>
            <el-option label="待确认" :value="3"></el-option>
            <el-option label="已完成" :value="4"></el-option>
            <el-option label="已取消" :value="5"></el-option>
            <el-option label="全部" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectOrder()">查询</el-button>
          <el-button @click="qk()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card>
      <el-button @click="assignments">分配快递员</el-button>
      <!-- 表 -->
      <el-table ref="multipleTable1" :data="tableData" v-loading="loading" v-if="order.taskType === 1">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          width="80"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (page - 1) * size + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="作业编号" width="200"></el-table-column>
        <el-table-column prop="tranOrderId" label="运单编号" width="200"></el-table-column>
        <el-table-column label="快递员分配状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.assignedStatus === 1">待取件</span>
            <span v-if="scope.row.assignedStatus === 2">已分配</span>
            <span v-if="scope.row.assignedStatus === 3">待人工分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
        <el-table-column label="作业状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">待执行</span>
            <span v-if="scope.row.status === 2">进行中</span>
            <span v-if="scope.row.status === 3">待确认</span>
            <span v-if="scope.row.status === 4">已完成</span>
            <span v-if="scope.row.status === 5">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="快递员姓名" width="120"></el-table-column>
        <el-table-column prop="senderName" label="收件人姓名" width="120"></el-table-column>
        <el-table-column prop="senderPhone" label="收件人电话" width="120"></el-table-column>
        <el-table-column prop="senderAddress" label="收件人地址" width="330"></el-table-column>
        <el-table-column prop="estimatedStartTime" label="取件时间" width="200"></el-table-column>
        <el-table-column prop="actualEndTime" label="完成时间" width="200"></el-table-column>
        <el-table-column prop="confirmTime" label="签收时间" width="200"></el-table-column>
      </el-table>
      <el-table ref="multipleTable2" :data="tableData" v-loading="loading" v-if="order.taskType === 2">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          width="80"
          label="序号">
          <template slot-scope="scop">
            {{ scop.$index + (page - 1) * size + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="作业编号" width="200"></el-table-column>
        <el-table-column prop="tranOrderId" label="运单编号" width="200"></el-table-column>
        <el-table-column label="快递员分配状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.assignedStatus === 1">待取件</span>
            <span v-if="scope.row.assignedStatus === 2">已分配</span>
            <span v-if="scope.row.assignedStatus === 3">待人工分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
        <el-table-column label="作业状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">待执行</span>
            <span v-if="scope.row.status === 2">进行中</span>
            <span v-if="scope.row.status === 3">待确认</span>
            <span v-if="scope.row.status === 4">已完成</span>
            <span v-if="scope.row.status === 5">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="快递员姓名" width="120"></el-table-column>
        <el-table-column prop="receiverName" label="发件人姓名" width="120"></el-table-column>
        <el-table-column prop="receiverPhone" label="发件人电话" width="120"></el-table-column>
        <el-table-column prop="receiverAddress" label="发件人地址" width="330"></el-table-column>
        <el-table-column prop="estimatedStartTime" label="取件时间" width="200"></el-table-column>
        <el-table-column prop="actualEndTime" label="完成时间" width="200"></el-table-column>
        <el-table-column prop="confirmTime" label="签收时间" width="200"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sizes">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="分配快递员"
      :visible.sync="assignmentsModel"
      width="40%">
      <el-form :model="courierData" ref="userFrom" label-width="100px">

        <el-form-item label="*快递员" prop="courierId">
          <el-select v-model="courierData.courierId" placeholder="请选择岗位" style="width: 100%">
            <el-option v-for="item in selectArray" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="danger" @click="courierSubmit">确认</el-button>
        <el-button type="" @click="assignmentsModel = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import OrderAPI from '../../../../src/api/logisticsmanagement/ordermanagement/orderAPI'
import om from '../../../../src/api/logisticsmanagement/branchManagement/operationalManagement'

export default {
  name: 'operationalManagement',
  data() {
    return {
      assignmentsModel: false, // 分配快递员模态框
      courierData: {
        taskType: null,
        id: null,
        courierId: null
      },
      selectArray: [],
      // 加载条
      loading: false,
      page: 1,
      size: 5,
      sizes: 0,
      tableData: [],
      order: {
        taskType: 1,
        tranOrderId: '',
        courierName: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderAddress: '',
        senderName: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        status: 0
      },
      orderQK: {
        taskType: 1,
        tranOrderId: '',
        courierName: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderAddress: '',
        senderName: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        status: 0
      },
      options: []
    }
  },
  methods: {
    getPdAreaTree() {
      OrderAPI.getPdAreaTree().then(({data}) => {
        this.dg(data.data)
        this.options = data.data
      })
    },
    selectOrder() {
      this.loading = true
      om.getPdTaskPickupDispatchPageFind(this.page, this.size, this.order).then(({data}) => {
        this.page = data.data.pageNum
        this.size = data.data.pageSize
        this.sizes = data.data.total
        this.tableData = data.data.list
        this.loading = false
      })
    },
    qk() {
      this.order = this.orderQK
    },
    // 显示数
    handleSizeChange(v) {
      this.size = v
      this.selectOrder()
    },
    // 上下页
    handleCurrentChange(v) {
      this.page = v
      this.selectOrder()
    },
    // 利用递归删除一个不必要属性
    dg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data.length > 0) {
            if (data[i].children.length > 0) {
              this.dg(data[i].children)
            } else {
              delete data[i].children
            }
          }
        }
      }
    },
    getSender(value) {
      this.order.senderProvinceId = value[0]
      this.order.senderCityId = value[1]
      this.order.senderCountyId = value[2]
    },
    getReceiver() {
      this.order.receiverProvinceId = value[0]
      this.order.receiverCityId = value[1]
      this.order.receiverCountyId = value[2]
    },
    getType(tab, event) {
      if (tab.label === '取件作业') {
        this.order.taskType = 1
      } else {
        this.order.taskType = 2
      }
      this.qk()
      this.selectOrder()
    },
    // 分配快递员
    assignments() {
      // 清空
      this.courierData = {taskType: null, id: null, courierId: null}

      let check = null;
      if (this.order.taskType === 1) {
        // 获取表格的选中个数
        check = this.$refs.multipleTable1.selection
      } else if (this.order.taskType === 2) {
        check = this.$refs.multipleTable2.selection
      }

      if (check.length === 0 || check.length >= 2) {
        this.$message({
          message: '请选择一项',
          type: 'warning'
        });
      } else {
        this.courierData.id = check[0].id // id
        this.courierData.taskType = this.order.taskType // 类型

        // 组织id查询快递员
        OrderAPI.getCourierByOrgId(check[0].agencyId).then(({data}) => {
          this.selectArray = data.data
          this.assignmentsModel = true
        })
      }
    },
    // 确认分配
    courierSubmit() {
      this.$store.commit('startAnimation', true)
      if (this.courierData.courierId == null) {
        this.$store.commit('startAnimation', false)
        this.$message({
          message: '请选择分配的快递员',
          type: 'warning'
        });
        return
      }
      OrderAPI.setCourier(this.courierData).then(({data}) => {
        this.$store.commit('startAnimation', false)
        this.assignmentsModel = false
      })
    }
  },
  created() {
    this.getPdAreaTree()
    this.selectOrder()
  }
}
</script>
<style>

</style>
